<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type='text/javascript' src="../static/js/echarts.js" charset = "utf-8"></script>
    <script src="../static/js/china.js" charset ="utf-8"></script>  
</head>
<body>

<div id="main2" style="width: 1000px;height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
         var myChart2 = echarts.init(document.getElementById('main2'));
        var option2 = {
                title : {
        text: '2016年销售额',
        x:'center'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'      // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: "{a} <br/>{b}: {c}亿 "
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
     legend: {
        data:['销售额','增长率'],
        x: 'left'
    },
    xAxis : [
        {
            type : 'category',
            data : ['2015年', '2016年'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            name: '销售额',
            show : false
        },
        {
            type: 'value',
            name: '增长率',
            show : false
        }
        ],
    series : 
    [
        {
            name:'销售额',
            type:'bar',
            barWidth: '60%',
             "itemStyle": {
                "normal": {
                    "color": "rgba(255,144,128,1)",
                    "label": {
                        "show": true,
                        "textStyle": {
                             fontSize: 50
                        },
                        "position": "insideTop"}} 
            },
            data:[10.59, 26.3]
        },
    {
        name: '增长率',
        type: 'line',
        data: [10.59, 26.3]
    }
    ]
};
myChart2.setOption(option2);
</script>




    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:1000px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
    var  option = {
        title : {
        text: '各品类销售额',
        x:'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {d}%"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['特色馆','特色干货','时令生鲜','传统小吃','其它','乐县域','米面油','大家电','日用','农资','乐6集']
    },
    series: [
        {
            name:'三大平台',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: true
                }
            },
            data:[
                {value:13.5, name:'乐6集', selected:true},
                {value:21.3, name:'特色馆'},
                {value:65.2, name:'乐县域'}
            ]
        },
        {
            name:'品类',
            type:'pie',
            radius: ['40%', '55%'],

            data:[
                {value:7.2, name:'米面油'},
                {value:2.8, name:'大家电'},
                {value:2.0, name:'日用'},
                {value:1.5, name:'其它'},
                {value:9.1, name:'特色干货'},
                {value:4.7, name:'时令生鲜'},
                {value:3.3, name:'传统小吃'},
                {value:4.2, name:'其它'},
                {value:27.1, name:'米面油'},
                {value:12.0, name:'大家电'},
                {value:10.9, name:'日用'},
                {value:10.8, name:'农资'},
                {value:4.5, name:'其它'}
            ]
        }
    ]
};
myChart.setOption(option);
</script>


<div id="main1" style="width: 1000px;height:1000px;"></div>
    <script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('main1'));
    var option1 = {
    title: {
        text: '乐村淘销售区域热力图',
        subtext: '数据来源：乐村淘',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['高','中','低','未覆盖']
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: '高',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '山西',value: 99.1},
                {name: '河北',value: 85.3},
                {name: '陕西',value: 70.5},
                {name: '广西',value: 60.5},
                ]
        },
        {
            name: '中',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '内蒙古',value: 50.8},
                {name: '江苏',value: 48.6},
                {name: '辽宁',value: 45.3},
                {name: '云南',value: 42.1 },
                {name: '四川',value: 40.9 },
                {name: '湖北',value: 39.1 },
                {name: '广东',value: 38.4 },
                {name: '山东',value: 28.4 },
                {name: '河南',value: 18.4 },
                {name: '江西',value: 28.7 }
                ]
        },
        {
            name: '低',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '甘肃',value: 35.7},
                {name: '黑龙江',value:36.8},
                {name: '吉林',value: 40.3 },
                {name: '安徽',value: 39.2 },
                {name: '天津',value: 36.3 },
                {name: '北京',value: 20.2 },
                {name: '湖南',value: 34.5 },
                {name: '青海',value: 21.9 },
                {name: '贵州',value: 12.6 },
                {name: '浙江',value:14.7 },
                {name: '上海',value: 11.2 },
                {name: '海南',value: 10.1 },
                {name: '新疆',value: 8.5 },
                {name: '福建',value: 7.1 },
                {name: '重庆',value: 6.5 },
                {name: '宁夏',value: 5.4 }
            ]
        }
    ]
};
myChart1.setOption(option1);
window.onresize = myChart1.resize;
</script>